import React, { Component } from "react";

import RingStyle from "./Rings.module.scss";

export default class Rings extends Component {
    state = {
        secondRingVisible: false,
    };

    componentDidMount() {
        this.timeout = setTimeout(() => {
            this.setState({ secondRingVisible: true });
        }, 3000);
    }

    componentWillUnmount() {
        clearTimeout(this.timeout);
    }

    render() {
        return (
            <div>
                <div className={RingStyle.circleWrapAnimated}>
                    <div className={RingStyle.circle}>
                        <div className={RingStyle.circle} />
                    </div>
                </div>

                {this.state.secondRingVisible && (
                    <div className={RingStyle.circleWrapAnimated}>
                        <div className={RingStyle.circle}>
                            <div className={RingStyle.circle} />
                        </div>
                    </div>
                )}
            </div>
        );
    }
}
